<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>数据详情</title>
        <script src="/unpkg/unpkg.vue.js"></script>
        <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
        <script src="/unpkg/lib-master/index.js"></script>
        <script src="/unpkg/unpkg.axios.min.js"></script>
        <style type="text/css">
            html {
                background-color: #F1F3F4;
            }

            .title {
                background-color: #FFFFFF;
                height: 40px;
                line-height: 40px;
                padding: 0 20px;
            }

            .person {
                margin-top: 5px;
                background-color: #F1F3F4;
                height: 30px;
                line-height: 30px;
                padding: 0 5px;
            }

            .box {
                padding: 10px 20px;
            }

            .btn-input {
                display: flex;
                justify-content: space-between;

            }

            .input {
                width: 10%;
            }

            .box-card {
                margin-top: 10px;
            }

            .is-leaf {
                text-align: center !important;
            }

            td {
                text-align: center !important;
            }

            .el-button+.el-button {
                margin-left: 0 !important;
            }

            .box-title {
                text-align: center;
                font-size: 16px;
            }

            .box-cont {
                display: flex;
                margin: 10px 0;
            }

            .way1 {
                width: 47%;
                display: flex;
                flex-direction: column;
            }

            .way1 img {
                width: 100px;
                height: 100px;
            }

            .way2 {
                width: 53%;
                display: flex;
                flex-direction: column;
            }

            .link-cont {
                border: 1px solid #DCDFE6;
                padding: 10px;
            }

            .box-btn {
                text-align: end;
            }

            .imgs-name {
                width: 50px;
                height: 50px;
            }

            .cell {
                display: flex;
                align-items: flex-start;
                justify-content: center;
            }

            .box-item1 {
                margin-top: 20px;
                height: 100px;
                /* width: 90%; */
                display: flex;
                border: 1px solid #EBF6FF;
                background-color: #FBFDFF;
                line-height: 50px;
            }

            .box-item2 {
                margin-top: 20px;
                min-height: 100px;
                /* width: 90%; */
                border: 1px solid #EBF6FF;
                background-color: #FBFDFF;
                /* line-height: 50px; */
            }

            .task {
                width: 44%;
                border: 1px solid #F3F3F4;
                margin: 5px 0 5px 10px;
                height: 35px;
                line-height: 35px;
                padding-left: 15px;
                background-color: #FFFFFF;
            }

            .el-input__inner {
                height: 30px !important;
                line-height: 30px !important;
            }

            .el-date-editor .el-range__icon {
                line-height: 20px !important;
            }

            .el-date-editor .el-range-separator {
                line-height: 20px !important;
            }

            .el-date-editor .el-range__close-icon {
                line-height: 20px !important;
            }
            .el-calendar-day{
                position: relative;
                height: 70px !important;
            }
            .selected{
                position: absolute;
                bottom: 15px;
                width: 100%;
                text-align: center;
                left: 0;
                color: #67c23a;
            }
        </style>

    </head>

    <body>
        <div id="app">
            <div class="title">
                <div>数据详情</div>
            </div>
            <div class="box">
                <el-card>
                    <el-form :inline="true" :model="dataSearch" class="demo-form-inline">
                        <el-form-item label="搜索员工">
                            <el-input v-model="dataSearch.user" placeholder="请输入所属员工名称"></el-input>
                        </el-form-item>
                        <el-form-item label="打卡天数筛选">
                            <el-input v-model="dataSearch.days" type="number" min='0' step="1" placeholder="请输入天数"></el-input>
                        </el-form-item>
              <!--           <el-form-item label="地区筛选">
                            <el-select v-model="dataSearch.areas" placeholder="请选择地区">
                                <el-option label="上海" value="1"></el-option>
                                <el-option label="郑州" value="2"></el-option>
                                <el-option label="北京" value="3"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="最近打卡时间">
                            <el-col :span="11">
                                <el-date-picker v-model="dataSearch.value1" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="onSubmit">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="全部" name="0"></el-tab-pane>
                            <el-tab-pane label="进入页面未参与" name="1"></el-tab-pane>
                            <el-tab-pane label="参与打卡未完成" name="2"></el-tab-pane>
                        </el-tabs>
                        <el-table :data="lists" style="width: 100%"  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
							</el-table-column>
                            <el-table-column prop="nickname" label="全部客户">
                              <!--   <template slot-scope="scope">
                                    <img class="imgs-name" :src="scope.row.imgs" alt="">
                                </template> -->
                            </el-table-column>
                            <el-table-column prop="types" label="客户类型">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.is_kehu">已是客户</span>
                                    <span v-else>未添加企业员工</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="last_clock_time" label="最近打卡时间">
                            </el-table-column>
                   <!--          <el-table-column prop="citys" label="城市">
                                郑州
                            </el-table-column> -->
                            <el-table-column prop="user_name" label="所属员工">
                            </el-table-column>
                            <el-table-column prop="customers" label="客户标签">
                            </el-table-column>
                            <el-table-column prop="total_day" label="总打卡天数">
                            </el-table-column>
                            <el-table-column prop="continuous_day" label="连续打卡天数">
                            </el-table-column>
                            <el-table-column prop="status" label="用户行为">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status == 1">进入页面未打卡</span>
                                    <span v-if="scope.row.status == 2">打卡未完成</span>
                                    <span v-if="scope.row.status == 3">打卡完成</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="220">
                                <template slot-scope="scope">
                                    <el-button size="small" type="primary" @click="cardDay(scope.row.id)">查看详细打卡天数
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </div>
            <el-dialog :visible.sync="daysBox" width="30%">
                <div class="box-title"><strong>详细打卡天数</strong></div>
                <div class="box-item1">
                    <div style="width: 33%;display: flex;flex-direction: column;align-items: center;">
                        <span>总打卡天数</span>
                        <span>!{!{details.total_day}}天</span>
                    </div>
                    <div style="width: 67%;display: flex;flex-direction: column;align-items: center;">
                        <span>参与打卡时间：!{!{details.first_day}}</span>
                        <span>最近打卡时间：!{!{details.last_day}}</span>
                    </div>
                </div>
                <div class="box-item2">
                    <div style="padding-left: 20px;">
                        <span>!{!{ details.type_name }}打卡任务：</span>
                    </div>
                    <div style="display: flex;flex-wrap: wrap;align-items: center;">
                        <span class="task" v-for="task in details.tasksLevel">
                            <span v-if="task.is_finish">!{!{ details.type_name }}签到!{!{ task.days }}天任务已完成</span>
                            <span v-else>!{!{ details.type_name }}签到!{!{ task.days }}天任务还需!{!{ task.residue }}天</span>
                        </span>
                    </div>
                </div>
                <div class="box-item3">
                    <el-calendar v-model="month">
                        <template slot="dateCell" slot-scope="!{date, data}">
                            <div>!{!{data.day.slice(8)}}</div>
                            <div v-if="calendarData.includes(data.day)" class="selected">已打卡</div>
                        </template>
                    </el-calendar>
                </div>
            </el-dialog>
        </div>
        <script type="text/javascript">
            var myapp = new Vue({
                el: '#app',
                data() {
                    return {
                        details: {
                            tasksLevel: [],
                            type_name: '连续',
                        },
                        lists: [],
                        activeName: 'all',
                        requestData: {
                            id: "{$_GET['id']}",
                            status: ''
                        },
                        dataSearch: {
                            user: '',
                            days: '',
                            areas: '',
                            value1: ''
                        },
                        daysBox: false,
                        month: new Date(),
                        calendarData:[]
                    }
                },
                mounted() {
                    this.detailList()
                },
                methods: {
                    handleSelectionChange(){

                    },
                    handleClick(tab) {
                        this.requestData.status = tab.name
                        this.detailList();
                    },
                    detailList() {
                        axios.get('/Addons/GroupClock/Admin/GroupClock/detailAPI.html',{ 
                            params:{
                                id: this.requestData.id,
                                status: this.requestData.status,
                                user: this.dataSearch.user,
                                days: this.dataSearch.days,
                                datef: this.dataSearch.value1,
                            }
                        }).then(res => {
                            if (res.data.status == 'success') {
                                this.lists = res.data.data
                            }
                        })
                    },
                    cardDay(row) {
                        this.daysBox = true
                        axios.get('/Addons/GroupClock/Admin/GroupClock/detail_days.html', {
                            params: {
                                id: row,
                            }
                        }).then(res => {
                            if (res.data.status == 'success') {
                                this.details = res.data.data
                                this.calendarData = res.data.data.record
                            }
                        })
                    },
                    onSubmit() {
                        this.detailList()
                        this.$message.success('获取成功')
                    }
                }
            })
        </script>
    </body>

</html>
